import React, { useEffect, useState, useContext } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import { Icon } from 'antd-mobile';
import { getSongSheetDetail } from '../../Request/SongSheetDetail'
import MyContext from '../../actions'
import NavBara from '../publicZujian/NavBar';
import { getmusUrl } from '../../Request/publicReq';
import './index.css'


export default () => {
  const dispatch = useContext(MyContext);
  const [songDetail1, setsongDetail1] = useState(null)
  const [songDetail2, setsongDetail2] = useState(null)
  const [songDetail3, setsongDetail3] = useState(null)
  const [songDetail5, setsongDetail5] = useState(null)
  const [songDetail6, setsongDetail6] = useState(null)
  const [commentCount, setCommentCount] = useState(null)
  const [shareCount, setShareCount] = useState(null)
  const [trackslist, settracks] = useState([])
  const [trackCounts, settrackCount] = useState(null)
  const [subscribedCounts, setsubscribedCount] = useState(null)
  // list 列表数据
  const [iconLists] = useState([{ icon: 'icon-pinglun iconfont', name: '1' }, { icon: 'icon-fenxiang', name: '2' }, { icon: 'icon-xiazai', name: '下载' }, { icon: 'icon-iconfontxuanzekuangyixuan', name: '多选' }])
  const location = useLocation();
  const history = useHistory();

  const jisuanfilter = (val, i) => {
    let v = null;
    if (i === 0) {
      v = commentCount
    } else if (i === 1) {
      v = shareCount
    } else if (i === 2) {
      v = '下载'
    } else {
      v = '多选'
    }

    return v
  }

  // 调用reducer函数修改
  const getLickmusUrl = async (id) => {
    const { data } = await getmusUrl(id)
    dispatch({type: 'add',mucurl:data.data[0].url})
  }

  //  页面刷新时判断路由中是否包含id，包含就发起请求获取数据，否则就跳回上一个页面
  useEffect(() => {
    const fetchData = async (id) => {
      const { data } = await getSongSheetDetail(id)
      const { coverImgUrl, name, description, creator, commentCount, shareCount, tracks, trackCount, subscribedCount } = data.playlist
      setsongDetail1(coverImgUrl)
      setsongDetail2(name)
      setsongDetail3(description)
      setsongDetail5(creator.avatarUrl)
      setsongDetail6(creator.nickname)
      setCommentCount(commentCount)
      setShareCount(shareCount)
      settracks(tracks)
      settrackCount(trackCount)
      setsubscribedCount(subscribedCount)
    }
    if (location.query) { fetchData(location.query.id) } else { history.goBack() }
  }, [])

  return (
    <div className="find-view">
      {/* nav 标签 */}
      <NavBara value="官方动态歌单"/>

      {/* 页面主体 */}
      <div className="content main-zhuti">
        <header className="song-header">

          {/* title */}
          <div className="song-hea-title">
            {/* 左边图片 */}
            <div className="left-wrap">
              <img src={songDetail1} alt="" />
            </div>

            {/* 右边内容 */}
            <div className="right-wrap">
              <h2 className="ri-title">{songDetail2}</h2>
              <span className="ri-center-wrap">
                <div className="center-img">
                  <img src={songDetail5} alt="" />
                </div>
                <p className="cen-txt">{songDetail6}</p>
                <i><Icon type="right" /></i>
              </span>
              <span className="footer-txt">{songDetail3}</span>
            </div>
          </div>

          {/* list列表 */}
          <div className="hea-list">
            <ul className="hea-list-items">
              {iconLists.map((val, i) => <li className="hea-item" key={i}>
                <span className="hea-icons">
                  <i className={val.icon + ' iconfont'}></i>
                </span>
                <p className="hea-item-txt">{jisuanfilter(val, i)}</p>
              </li>)}
            </ul>
          </div>
        </header>

        <main className="song-mainContent find-view">
          {/* 列表头 */}
          <div className="ma-mcHeader" >
            <span className="ma-mc-icon">
              <i className="iconfont icon-bofang1"></i>
            </span>
            <span className="ma-mc-bof">播放全部</span>
            <span className="trackCount">(共{trackCounts}首)</span>
            <span className="subscribedCount">+收藏({subscribedCounts})</span>
          </div>

          {/* 列表list */}
          <div className="detail-ul content">
            <ul>
              {
                trackslist.map((val, i) => <li className="detail-li" key={i} onClick={() => { getLickmusUrl(val.id) }}>
                  <span className="det-li-id">{i}</span>
                  <div className="det-li-dv">
                    <p className="det-li-titke">{val.name}</p>
                    <p className="det-li-info">{val.ar[0].name + ' - ' + val.name}</p>
                  </div>
                  <span className="det-li-rightIcon">
                    {/* <i className="iconfont icon-bofang">图标</i> */}
                    <Icon type="ellipsis" />
                  </span>
                </li>)
              }

            </ul>
          </div>
        </main>
      </div>
    </div>
  )
}
